<template>
	<view class="item">
		<view class="image">
			<image :src="item.avatar" mode="aspectFill"></image>
			<view class="mengban">
				<text>{{ item.call_card_info.tags }}</text>
			</view>

			<view class="tags-box flex_center">
				<view class="tags flex_center" v-if="item.user_act_type != 0">
					<view class="circle green flex_r_around" v-if="item.user_act_type == 1">
						<view></view>
					</view>
					<view class="circle white flex_r_around" v-if="item.user_act_type == 2">
						<view></view>
					</view>

					<text v-if="item.user_act_type == 1">在线</text>

					<!-- <text class="hidden">{{ item.distance_desc }}</text> -->
				</view>

				<!-- <view class="tags flex_r_around">
					<text class="hidden">{{ item.city }}{{ item.area }}</text>
				</view> -->
			</view>

		</view>

		<view class="name flex_center">
			<view class="left flex_center">
				<text class="hidden">{{ item.nickname || '' }}</text>
				<image :src="$util.prefix(`public/sex_${item.gender}_no_bg.png`)" mode="aspectFill"></image>
				<view class="tags blue">{{ item.age }}</view>
			</view>

			<view class="right flex_r_around">
				<text>预约</text>
			</view>
		</view>

		<view class="sign hidden_2">
			{{ item.sign || 'Ta什么也没有留下' }}
		</view>

	</view>
</template>

<script>
	export default {
		name: "card-col-item",
		props: {
			item: {
				type: Object,
				default: () => {},
			},
			index: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 340rpx;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 0 8rpx 16rpx;

		.image {
			width: 340rpx;
			height: 468rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 340rpx;
				height: 468rpx;
			}

			.mengban {
				width: 100%;
				height: 112rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
				opacity: 0.7;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					position: absolute;
					left: 16rpx;
					bottom: 20rpx;
				}
			}

			.tags-box {
				position: absolute;
				left: 16rpx;
				top: 16rpx;

				.tags {
					// width: 120rpx;
					height: 40rpx;
					background: #000000;
					border-radius: 12rpx;
					opacity: 0.4;
					backdrop-filter: blur(3px);
					overflow: hidden;
					margin-right: 8rpx;
					padding: 0 12rpx;

					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.circle {
						width: 16rpx;
						height: 16rpx;
						border-radius: 8rpx;
						margin-right: 6rpx;

						view {
							width: 6rpx;
							height: 6rpx;
							border-radius: 3rpx;
						}
					}

					.green {
						background: rgba(73, 235, 82, 0.4);

						view {
							background: rgba(73, 235, 82, 0.6);
						}
					}

					.white {
						background: rgba(204, 204, 204, 0.4);

						view {
							background: rgba(204, 204, 204, 1);
						}
					}
				}
			}
		}

		.name {
			overflow: hidden;
			margin: 20rpx 16rpx 10rpx;

			.left {
				flex: 1;
				overflow: hidden;

				text {
					max-width: 160rpx;
					font-size: 24rpx;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin: 0 4rpx 0 8rpx;
				}

				.tags {
					font-size: 22rpx;
					line-height: 24rpx;
				}
			}

			.right {
				width: 80rpx;
				height: 36rpx;
				background: #FD2A53;
				border-radius: 16rpx;

				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

		}

		.sign {
			margin: 16rpx 16rpx 0;
			font-size: 24rpx;
			color: #666666;
			line-height: 32rpx;
		}

	}
</style>